<template>
<div class="about">
  <!-- 模板中我们不需要.value, 在编译模板会自动.value -->
  <h3>count: {{count}}</h3>
  <h3>state.msg: {{state.msg}}</h3>
  <h3>state.person: {{state.person}}</h3>
  <h3>state.numbers: {{state.numbers}}</h3>


  <button @click="update">更新</button>
</div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch } from "vue";

  // 定义接口约束state的结构
  interface State {
    msg: string;
    person: {
      name: string;
      age: number;
      sex?: string;
    };
    numbers: number[];
  }

  const count = ref<number>(2)  


  // 使用reactive来定义响应式数据
  // reactive中指定的对象中所有层次属性都是响应式的
  const state: State = reactive({
    msg: 'abc',
    person: {
      name: 'tom',
      age: 12
    },
    numbers: [1, 3, 5]
  })
  // console.log(state)

  // 监视一个 ref数据
  // 传入响应式对象
  watch(count, (value) => {
    console.log('watch count', value)
  })
  // 监视一个 reactive数据  msg
  // 传入返回要监视数据的函数
  watch(() => state.msg, value => {
    console.log('watch msg', value)
  })

  // 监视多个数据
  watch([count, () => state.msg], values => {
    console.log('watch count & msg', values)
  }, {deep: true, immediate: true}) // 深度监视 和 立即监视


  const update = () => {
    // count.value += 1

    // 更新已有属性
    state.msg += '--'
    // state.person.age += 1

    // 给响应式对象直接添加一个新属性
    // state.person.sex = '男' // 在vue2中界面不会自动更新 => vue3中可以

    // 直接通过下标修改数组元素
    // state.numbers[1] = 6 // 在vue2中界面不会自动更新 => vue3中可以
  }
</script>
